<!--油管播放插件-->
<template>
    <div>
        <v-sheet class="pt-[72px] relative">
            <v-carousel
            height="960"
            hide-delimiters
            :show-arrows="false"
            >
            <v-carousel-item
                v-for="(slide, i) in lists"
                :key="i"
            >
            <banner-image link
                        :HeadImage="slide.headImage"
                        :SubImage="slide.subImage"/>
            </v-carousel-item>
            </v-carousel>
            <div class="absolute top-[35%] left-[255px] d-flex flex-column w-4/12" :class="themeColor">
                <div class="title text-7xl text-white font-bold">{{ title }}</div>
                <div class="mt-10">
                <span class="sub-tiele text-white text-2xl">{{ subTitle }}</span>
                </div>
                <div class="d-flex align-center text-white mt-10">
                    <NuxtLink to="/contact-us">
                        <v-btn class="px-18" rounded size="x-large" color="primary">联系我们</v-btn>
                    </NuxtLink>
                    <a class="doc ml-20 text-2xl cursor-pointer d-flex align-center" href="" v-if="isShowDoc">
                        <span class="mr-4">查看文档</span>
                        <i class="fa-solid fa-angle-right text-[14px]"></i>
                    </a>
                </div>
            </div>
        </v-sheet>

        <div class="mx-auto d-flex justify-center w-9/12 mt-40">
            <div 
            v-for="bl in lists_bottom"
            :key="bl.id"
            class="bg-white d-flex justify-center align-center rounded-lg mr-10 last:mr-0"
            >
            <div class="w-3/12 bg-gray-50 d-flex flex-column align-center h-[500px] w-[440px] text-center px-10">
                <div>
                    <v-img width="200px" height="200px" cover :src="bl.src"/>
                </div>
                <span class="font-semibold text-2xl mt-4  mb-10">{{ bl.title }}</span>
                <span class="">{{ bl.subTitle }}</span>
            </div>
            </div>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import {onMounted} from "vue";
  
  const props = defineProps({
    isShowDoc: {
        type: Boolean,
        default: true
    },
    themeColor: String, 
    lists: Array,
    lists_bottom: Array,
    title: String,
    subTitle: String
  })
  
  onMounted(() => {
    console.log(props.lists)
  })
  </script>
  
  <style scoped>
    .black .title{
       color: #000!important;
    }

    .black .sub-tiele {
        color: rgba(0, 0, 0, .6)!important;
    }

    .black .doc {
        @apply text-[#1677ff]
    }

    .doc:hover .fa-angle-right {
        @apply transform transition-transform duration-300 translate-x-1;
    }
  </style>